<template>
    <div style="display: inline-block;">
        <div @click="dialogVisible = true" style="color: #1890ff;text-decoration: underline;cursor: pointer;">{{ name }}</div>
        <el-dialog :title="$t('message.system.preview')" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
            <div class="ImageCickPreviewDia" v-for="(item,index) in fileSrc" :key="index">
                <el-image style="width: 80%; height: 400px" :src="item" :preview-src-list="fileSrc" :initial-index="index"></el-image>
            </div>

        </el-dialog>
    </div>
</template>

<script>

export default {
    name: '',
    props: {
        src: {
            default: [],
            type: Array
        },
        name: {
            default: '预览',
            type: String
        },

        // 高
        height: {
            default: 0,
            type: Number
        },
        preview: {
            default: false,
            type: Boolean
        }


    },
    computed: {
        fileSrc() {
            let arr=[]
            this.src.forEach(element => {
              console.log('process.env.VUE_APP_FILE_BASE_API + element',process.env.VUE_APP_FILE_BASE_API + element)
                arr.push(process.env.VUE_APP_FILE_BASE_API + element)
            });
            return arr
        }
    },
    data() {
        return {
            dialogVisible: false,
        }
    }
}
</script>

<style scoped lang='scss'>
.ImageCickPreviewDia {
    text-align: center;
}
</style>
